<template>
<div style="display: flex;justify-content: space-between;">
  <div style="background-color: #fae3e3;width: 27.5%">
    <div style="width: 100%;height:870px;" class="asidePic">
      <div class="poet">
        <h1>{{poem.source}}</h1>
        <p>{{poem.content}}</p>
<!--        <p>寒蝉凄切，对长亭晚，骤雨初歇。<br>-->
<!--          都门帐饮无绪，留恋处，兰舟催发。<br>-->
<!--          执手相看泪眼，竟无语凝噎。<br>-->
<!--          念去去，千里烟波，暮霭沉沉楚天阔。</p>-->

<!--        <p>多情自古伤离别，更那堪，冷落清秋节！<br>-->
<!--          今宵酒醒何处？杨柳岸，晓风残月。<br>-->
<!--          此去经年，应是良辰好景虚设。<br>-->
<!--          便纵有千种风情，更与何人说？<p>-->

      </div>

    </div>
  </div>


  <div style="width: 50%">
    <!--    日历组件-->
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template
          slot="dateCell"
          slot-scope="{date, data}">
        <div style="min-height: 100px;word-break:break-all"  @click="handleClick(data.day)" @mouseover="handleMouse(data.day)">
          <div>{{ data.day.split('-').slice(1).join('-') }} </div>
          <div v-if="arr.find(v => v.date === data.day)" v-html="arr.find(v => v.date ===data.day).content"></div>
        </div>
      </template>
    </el-calendar>

    <!--    填写组件-->
    <el-dialog title="日程安排" :visible.sync="dialogFormVisible" >
      <el-form :model="calendar">
        <el-form-item label="日程内容" :label-width="80">
          <el-input v-model="calendar.content" autocomplete="off" style="width: 80%"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <!--    提醒组件-->
    <el-dialog title="今天要做的事" :visible.sync="visible"  style="text-align: center;color: #66adcb;border-radius: 50px" >
      <div v-html="content" style="line-height: 40px;font-size: 18px;background-color: #eee9e9;padding: 10px 10px;border-radius: 20px"></div>
      <el-button @click="saveContent" type="primary" style="margin-top: 30px">我知道了</el-button>
    </el-dialog>
  </div>
  <div style="width: 27.5%">
    <div style="width: 100%;height:871px;border: 1px solid cornflowerblue; overflow: auto;" class="recommend">
      <div >
        <el-menu
            style="position: static"
            :default-active="'/recomandWord'"
            class="el-menu-demo"
            mode="horizontal"
            router
        >
          <el-menu-item index="/recomandWord">错词排行榜</el-menu-item>
          <el-menu-item  index="/recomandArticleOfHomeView">推荐文章</el-menu-item>
          <el-menu-item index="/recomandResourceOfHomeView">推荐资源</el-menu-item>
        </el-menu>
      </div>
     <div >
         <router-view></router-view>
     </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      arr:[],
      dialogFormVisible:false,
      calendar:{},
      visible:false,
      date:'',
      poem:{}
    }
  },
  created() {
    this.load()
    this.getPoem()
  },
  methods:{
    load(){
      this.request.get("/calendar").then(res => {
        this.arr = res.data

        const storageDate = localStorage.getItem('calendarVisible')
        const date = new Date().toJSON().split('T').join(' ').substr(0,10)
        const data = this.arr.find(v=>v.date ===date)
        if (!storageDate || (data && storageDate!== data.date) ) {
          this.content = data.content
          this.date=data.date
          this.visible = true
        }
      })
    },
    handleClick(date){
      this.calendar = {date: date}
        this.request.get("/calendar/date?date=" + date).then(res=> {
          if (res.data.length=== 0){
            return
          }else{
            this.calendar= res.data[0]
          }
        })
      this.dialogFormVisible = true
    },
    saveContent(){
      this.visible =false
      localStorage.setItem('calendarVisible',this.date)
    },
    save(){
      this.request.post("/calendar",this.calendar).then(res=> {
        if (res.code ==='200'){
          this.$message.success("已安排！")
          this.dialogFormVisible=false,
          this.load()
        }else{
          this.$message.success("保存失败！")
        }
      })
    },
    getPoem(){
      this.request.get("http://api.tianapi.com/zmsc/index?",{
        params:{
          key:'21a132ff5e21a4f68a0aa6b94ee7bf26',
        }
      }).then(res=> {
        console.log(res)
        this.poem=res.newslist[0]
      })
    },
    getPic(){
      this.request.get("https://cn.bing.com/HPImageArchive.aspx?", {
        params: {
          format:'js',
          idx:0,
          n:8,
          mkt:'zh-CN'
        }
      }).then(res => {
        console.log(res)
      })
    }

  }

}

</script>
<style>
.is-selected {
  color: #1174e7;
}
.el-dialog{
  width: 33%;
}
.el-calendar{
  margin: 0 auto;
  background-color: #b6d6f8;
  text-align: center;
  width: 100%;

}
.el-calendar-table .el-calendar-day{
  height: auto !important;
  min-height: 100px;
}
.el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev{
  color: #b26868;
}

.recommend::-webkit-scrollbar { width: 0 !important }
.asidePic{
  height: 100vh;
  overflow: hidden;
  background-image:url("../../assets/img/bgcpic.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  display: flex;
  justify-content: right;
}
.poet{
  /*wirting-mode实现竖直排版*/
  writing-mode: vertical-rl;
  margin-right: 100px;
}
.poet h1{
  margin-top: 8em;
}
.poet p:not(.author){
  letter-spacing: 0.5em;
  line-height:1.5em;
  margin: 2em;
}
.poet .author{
  text-align: right;
}

</style>